<template>
    <div>

        <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="vague.input1" class="input-with-select">
                <el-select v-model="vague.select" slot="prepend" placeholder="请选择" clearable required>
                    <el-option label="用户名" value="1"></el-option>
                    <el-option label="手机号" value="2"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="onSubmit"></el-button>
            </el-input>
        </div>
        <el-divider content-position="left">用户列表</el-divider>

        <!-- 用户表格 -->
        <el-table :data="usersData.result" border style="width: 100%">
            <el-table-column label="用户头像" width="110">
                <template slot-scope="scope">
                    <img :src="scope.row.userimage" alt="" width="85">
                </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="100">
            </el-table-column>
            <el-table-column label="用户密码" width="120">
                <template slot-scope="scope">
                    <span v-if="isShow == scope.$index">{{ scope.row.password }}</span>
                    <span v-else style="font-size: 32px;">······</span> <i class="el-icon-view"
                        @click="showPwd(scope.$index)"
                        style="cursor: pointer;font-size:16px;position:absolute;right:30px;top:50px;"></i>
                </template>
            </el-table-column>
            <el-table-column prop="role" label="角色" width="100"
                :filters="[{ text: '普通用户', value: 0 }, { text: '会员用户', value: 1 }, { text: '出入管理者', value: 2 }]"
                :filter-method="filterRole" filter-placement="bottom-end">
                <template slot-scope="scope">
                    {{ scope.row.role == 0 ? '普通用户' : scope.row.role == 1 ? '会员用户' : scope.row.role == 2 ? '出入管理者' : ''
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="usertel" label="用户电话" width="150">
            </el-table-column>
            <el-table-column prop="booklotsnum" label="预定车位" width="80">
            </el-table-column>
            <el-table-column prop="usercarid" label="车牌号" width="120">
            </el-table-column>
            <el-table-column prop="balance" label="用户余额">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-row>
                        <el-button size="small" type="warning"
                            @click="$router.push(`/home/user-update?username=${scope.row.username}`)">
                            修改</el-button>
                        <el-button size="small" type="danger" @click="delUser(scope.row.username)">删除</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination background layout="->, prev, pager, next, total, jumper" :total="usersData.total"
            :page-size="usersData.size" :current-page="usersData.nowPage * 1" style="margin:10px;"
            @current-change="pageChange">
        </el-pagination>
    </div>
</template>
<script>
export default {
    inject: ['reload'],
    data() {
        return {
            vague: {
                input1: '',
                select: '',
                params: {}
            },
            inputValue: '',
            usersData: {
                nowPage: 1,
                size: 5,
                total: 0,
                result: []
            }, //用户数据
            isShow: null
        }
    },
    methods: {
        onSubmit() {
            if (this.vague.select == '') {
                this.$message.error('请选择查询类目');
                return;
            }
            if (!this.vague.input1.trim()) {
                this.reload()
            } else {
                if (this.vague.select == '1') {
                    this.vague.params = { username: this.vague.input1, nowPage: 1, size: this.usersData.size }
                }
                if (this.vague.select == '2') {
                    this.vague.params = { usertel: this.vague.input1, nowPage: 1, size: this.usersData.size }
                }
                this.$http.userInfoApi.queryUserByValue(this.vague.params).then(res => {
                    this.inputValue = this.vague.input1;
                    console.log(res);
                    this.usersData = res.data.data;
                })
            }
        },
        pageChange(page) {
            //分页事件
            if (this.inputValue) {
                if (this.vague.select == '1') {
                    this.vague.params = { username: this.vague.input1, nowPage: page, size: this.usersData.size }
                }
                if (this.vague.select == '2') {
                    this.vague.params = { usertel: this.vague.input1, nowPage: 1, size: this.usersData.size }
                }
                this.$http.userInfoApi.queryUserByValue(this.vague.params).then(res => {
                    this.usersData = res.data.data;
                })
            } else {
                let param = { nowPage: page, size: this.usersData.size }
                this.$http.userInfoApi.queryAllUser(param).then(res => {
                    this.usersData = res.data.data
                })
            }
        },
        delUser(val) {
            // 删除事件
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.userInfoApi.deleteUser({ username: val }).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.reload()   // 刷新
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        filterRole(value, row) {
            return row.role == value
        },
        showPwd(i) {
            if (this.isShow === i) {
                this.isShow = null
            } else {
                this.isShow = i
            }
        },
    },

    mounted() {
        let param = { nowPage: 1, size: this.usersData.size }
        this.$http.userInfoApi.queryAllUser(param).then(res => {
            // console.log(res);
            this.usersData = res.data.data
        })
    },
}
</script>
<style>
.el-select .el-input {
    width: 130px;
}

.input-with-select {
    width: 500px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
